<template>
  <div class="partNewsIndex">
    <div class="secetion">
      <div class="videoWrap">
        <div class="videoPlayer ">
          <video
            webkit-playsinline="webkit-playsinline"
            x-webkit-airplay="isHtml5UseAirPlay"
            playsinline=""
            x5-playsinline=""
            autoplay=""
            controls=""
            :src=video.path
            id="video"
            style="object-fit:fill"
            preload="auto"
            poster="/Uploads/2018-08-15/5b73ec03cbf78.jpg"
            ref="video"
            chapter-id="9">
          </video>
        </div>
        <div class="videoTab">
          <p @click.stop="selectItem(index)" v-for="(item,index) in videoTab" :key="index" :class="{'active':defaultIndex==index}">
            <span>{{item}}</span>
          </p>
        </div>
        <div class="videoContentTab">
          <div class="videoContent " v-if="defaultIndex==0">
            <div class="videoItem">
              <div class="title clearfix" id="test">
                <p class="left">
                  {{videoTitle}}
                </p>
              </div>
              <router-link :to="{path:'/test',query:{id:item.id,class_id:class_id}}"  v-for="(item,index) in videoCharpter" :key="index">
                <div class="videoList">
                  <a >
                    <div class="videoLeft" >
                      <p class="videoTotalSum" :class="{'active':defaultIndex2==index}" @click.stop="choiseVideo(item.path,index,id,15)">
                        {{item.episode}} {{item.name}}</p>
                      <p class="videoTime">{{timeTran(item.see_time)}}分/{{timeTran(item.vtime)}}  </p>
                    </div>
                  </a>
                  <div class="videoRight">
                    <p>{{finishedStatus[item.is_over]}}</p>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
          <div class="videoContent" v-else>
            <div class="videoItem">
              <div class="title clearfix">
                <p class="left"> {{videoTitle}} </p>
              </div>
              <div class="videoConentInto">
                {{videoInto}}
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script >
  import aside from '../../components/aside.vue'
  import header from '../../components/header.vue'
  import loading from '../../components/loading.vue'
  import {mapState} from 'vuex'
  export default({
    data (){
      return {
        nomoreData:false,
        loadmoreClick:false,
        title:'微党校',
        defaultIndex:0,
        addPlanText:'加入学习计划',
        addFlag:0,
        videoCharpter:[],
        videoTitle:'',
        showLoading:false,
        tips:false,
        tipsHtml:'',
        videoTab:[
          '目录',
          '课程详情'
        ],
        video:{},
        finishedStatus:['未完成','已完成'],
        videoSrc:'',
        defaultIndex:0,
        defaultIndex2:0,
        id:"",
        class_id:'',
        path:''
      }
    },
    computed:{
      ...mapState({
        uid:state=>state.app.loginState.uid,
        token:state=>state.app.loginState.token
      })
    },
    components:{
      Aside:aside,
      Header:header,
      loading:loading
    },
    watch: {
      $router: 'watchRouter'
    },
    methods:{
      choiseVideo(str,index,Cid,id){
        let that =this
        if(this.$route.query.id){
          this.id =this.$route.query.id
        }
        this.showLoading =true
        this.defaultIndex2 =index
//        console.log(this.$refs.video.currentTime)
        if(parseInt(this.$refs.video.currentTime)>0){
          this.axios.post('/home/School/saveTime?'+`${that.baseUrl}`,{
            uid:this.uid||localStorage.getItem('uid'),
            currentTime:parseInt(this.$refs.video.currentTime),
            chapter_id:Cid,
            class_id:id
          }).then((res)=>{
//            console.log(res.data)
          })
            .then((res)=>{
//              this.video.path =str
              this.path =str

            }).then((res)=>{
//            this.video.path =str
//            this.showLoading =false
//            console.log(123)
//            this.initData()
          }).then((res)=>{
            this.initData()
          })
            .catch((res)=>{
              console.log(res.error)
            })
        }
      },
      selectItem(index){
        this.defaultIndex =index
      },

      choiseHead(index){
        this.defaultIndex =index
      },
      timeTran(str){
        var hour =parseInt(str/3600)
        var min = parseInt((str -hour*3600)/60)
        var sec =str - hour*3600 -min*60
        if(hour<=0){
          return min+'分'+sec+'秒'
        }else{
          return  hour+'时'+min+'分'+sec+'秒'
        }
      },
      initData(){
        //已加入课程
        console.log('11111111111')
        this.axios.get('/home/School/getDetail?'+`${this.baseUrl}`,{
          params:{
            class_id:20
          }
        }).then((res)=>{
          this.addFlag =res.data.data.is_study
          this.addPlanText ='加入学习计划'
          if(this.path){
            this.video.path =this.path
          }else {
            this.video =res.data.data.video
          }
          console.log(res.data.data.video)
          this.videoCharpter =res.data.data.data
          this.videoTitle =res.data.data.introduce.name
          this.videoInto =res.data.data.introduce.introduce.replace('<p>','').replace('</p>',"")
          this.$refs.video.currentTime =this.videoCharpter[this.defaultIndex2].see_time
//              console.log(this.$refs.video.currentTime)
          if(!this.id){
            this.id =res.data.data.data[0].id
          }

        })
      }
    },
    mounted (){
      let that =this
//        console.log('-----------------------------------------')
      this.class_id =20
//        console.log('`````````````')
//        console.log(`${this.baseUrl}`)
//        console.log('`````````````')
      $('body').removeClass('active')
      this.initData()
      this.$refs.video.addEventListener('ended',function () {
        that.axios.post('/home/School/saveTime?'+`${that.baseUrl}`,{
          uid:that.uid||localStorage.getItem('uid'),
          currentTime:parseInt(that.$refs.video.currentTime),
          chapter_id:that.id,
          class_id:that.class_id
        }).then((res)=>{
//            console.log(res.data)
        }).catch((res)=>{
//            console.log(res.error)
        })
      },false)
    },

  })
</script>
<style scoped="">
  .partNewsIndex{
    width: 100%;
    height: 100%;
    background: #f9f5f5;
  }
  body{

  }
  .videoPlayer{
    height:4.2rem;
    margin-top: 0.8rem;
    position: relative;
  }
  .videoWrap{
    background: #f9f5f5;
    height: calc( 100% - 0.92rem );
    overflow: scroll;
  }
  .videoWrap video{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .videoWrap  img{
    position: absolute;
    left: 50%;
    top:50%;
    margin-top: -0.44rem;
    margin-left: -0.44rem;
    width: 0.88rem;
    height: 0.88rem;
  }

  .videoTab{
    height: 0.8rem;
    line-height: 0.8rem;
    font-size: 0;
    background: #ffffff;
    border-bottom: 0.02rem solid #f9f5f5;
  }
  .videoTab p{
    display: inline-block;
    width: 50%;
    text-align: center;
    font-size: 0.32rem;
    color: #999999;
  }
  .videoTab p.active span{
    display: inline-block;
    height: 0.8rem;
    color:#e83329 ;
    padding: 0 0.3rem;
    border-bottom: 0.02rem solid #e83329;
  }
  .title{
    height: 1rem;
    line-height: 1rem;
    border-bottom: 0.02rem solid #f9f5f5;
  }
  .title .left{
    font-size: 0.32rem;
    color: #333333;
    position: relative;
    padding-left: 0.63rem;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 0.9rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;


  }
  .title .left:after{
    position: absolute;
    content: '';
    left: 0;
    top:50%;
    width: 0.45rem;
    height: 0.41rem;
    background-image: url("../../../static/images/star.png");
    background-size: 0.45rem 0.41rem;
    background-repeat: no-repeat;
    margin-top: -0.2rem;

  }
  .title .right{
    font-size: 0.26rem;
    color: #e32b2c;
  }
  .videoList{
    padding-left: 0.63rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.2rem;
    padding-bottom: 0.15rem;
  }
  .videoLeft .videoTotalSum{
    font-size: 0.28rem;
    color: #333333;

  }
  .videoLeft .videoTotalSum.active{
    color: #e83329;
  }
  .videoLeft .videoTime{
    color: #999999;
    font-size: 0.22rem;
  }
  .videoRight p{
    font-size: 0.26rem;
    color: #999;
    width: 1rem;
    margin-left: 0.2rem;
  }
  .addBtn,.addBtn2{
    position: fixed;
    bottom: 0.1rem;
    left: 0;
    width: 100%;
    text-align: center;
    /*margin: 0.46rem 0 0.46rem 0;*/

  }
  .videoItem{
    padding: 0 0.32rem;
    background: #fff;
  }
  .addBtn span,.addBtn2 span{
    display: inline-block;
    width: 5.3rem;
    height: 0.72rem;
    line-height: 0.72rem;
    background: #e83329;
    font-size: 0.32rem;
    color: white;
    border-radius: 0.3rem;
    -webkit-border-radius: 0.3rem;
  }
  .addBtn2 span{
    background: #999999;
  }
  .addBtn .hasAdd{
    background: #ccc;
    color: white;
  }

  .videoConentInto{
    padding-top: 0.3rem;
    padding-bottom: 0.2rem;
  }
  .videoConentInto p{
    text-indent: 2em;
    font-size: 0.26rem;
    color: #333333;
    padding-bottom: 0.2rem;
    text-align: justify;
  }

</style>
